<template>
  <div class="swiper-scroll">
    <el-carousel :interval="5000" arrow="always" height="700px">
        <el-carousel-item v-for="(item, index) in data.texts" :key="index">
            <h3>{{ item.name }}</h3>
            <p class="scroll-subtitle" v-html="strsubTitle(item.subtitle, item.substrong)"></p>
            <div class="tags">
                <span class="scroll-subTags" v-for="i in item.tags">
                    <img class="scroll-get" src="../../assets/images/merchants/package/scroll_get.png"/>
                    <span class="scroll-tags">{{ i }}</span>
                </span>
            </div>
            <img class="scroll-img" :src="item.imgUrl"/>
        </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Swiper',
  props: ['data'],
  created() {
      console.log(this.data)
  },
  methods: {
    strsubTitle(subtitle, substrong) {
      for (var i = 0; i < substrong.length; i++) {
        return subtitle.replace(new RegExp(substrong[i],'g'), '<span class="substrong">'+substrong[i]+'</span>')
      }
    }
  }
}
</script>
<style lang="scss">
  .swiper-scroll{
      text-align: center;
      .el-carousel__indicator .el-carousel__button{
          width: 16px;
          height: 16px;
          border-radius: 50%;
      }
      .el-carousel__arrow{
          width: 60px;
          height: 60px;
          background-color: #fff;
          color: #ccc;
          font-size: 40px;
      }
  }
</style>

<style lang="scss" scoped>
h3 {
    font-size: 36px;
    color: #fff;
    margin: 50px 0 0;
}
.scroll-subtitle{
  font-size: 24px;
  color: #fff;
}
.scroll-get{
  vertical-align: middle;
  margin: 0 3px 0 20px;
}

.scroll-tags{
    font-size: 18px;
    color: #ffdd00;
    vertical-align: middle;
}
.substrong{
  color: #ffdd00
}
</style>
